<template>
	<view class="detail">
		<view class="detailTitle">
			{{formData.title}}
		</view>
		<!-- 作者信息 -->
		<view class="detailAuthor">
			<view class="detailAuthorLogo">
				<image :src="formData.author.avatar" mode="aspectFill"></image>
			</view>
			<view class="detailAuthorMess">
				<view class="detailAuthorName">
					{{formData.author.author_name}}
				</view>
				<view class="detailAuthorInfo">
					<text> {{formData.create_time}}</text>
					<text>浏览人数{{formData.browse_count}}</text>
					<text>{{formData.thumbs_up_count}}人点赞</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="passageCont">
			<view class="passageContHtml">
				<u-parse :content="formData.content" :withoutData="withoutData"></u-parse>
			</view>
			<view class="commentCont">
				<view class="comment-title">
					最新评论
				</view>
				<view class="comment-content" v-for="item in commentsList" :key="item.comment_id">
					<comments-box :comments="item"></comments-box>
				</view>
			</view>
		</view>




		<!-- 底部工具 -->
		<view class="bottomTool">
			<view class="bottomToolLeft" @click="openComment">
				<!-- 评论 -->
				<uni-icons type="compose" size="24" color="#155915" class="bottomToolLeftIcon"></uni-icons>
				<text>发点看法吧</text>
			</view>
			<view class="bottomToolRight">
				<view class="bottomToolRightIcon">
					<uni-icons type="chat" size="22" color="#155915"></uni-icons>
				</view>
				<view class="bottomToolRightIcon">
					<uni-icons type="heart" size="22" color="#155915"></uni-icons>
					<!-- <likes class="bottomToolRightIcon"></likes> -->
				</view>
				<view class="bottomToolRightIcon" >
					<!-- <zan class="bottomToolRightIcon"></zan> -->
					<uni-icons type="hand-up" size="22" color="#155915"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 评论弹窗 -->
		<uni-popup ref="popup" type="bottom" :maskClick="false">
			<view class="popupwrap">
				<view class="popuphead">
					<text class="popupheadItem" @click="cancel">取消</text>
					<text class="popupheadItemTitle">写评论</text>
					<text class="popupheadItem" @click="send">发布</text>
				</view>
				<view class="popupcontent">
					<textarea class="popuptext" cols="30" rows="10" fixed="true" placeholder="来和作者聊一聊" maxlength="200"
						v-model="wordsCount"></textarea>
					<view class="popuptextcount">{{wordsCount.length}}/200</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//引入富文本渲染组件
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		// 注册组件
		components: {
			uParse
		},
		data() {
			return {
				// 渲染内容
				formData: {},
				withoutData: '<p style="text-align:center;color:#666">LOADING...</p>',
				// 输入文字值
				wordsCount: '',
				commentsList: [],
				
				zanTap: {
					isZan: true
				}
			}
		},
		onLoad(query) {
			// 获取list-card在链接传来的数据
			// 将字符串转为对象
			// console.log();
			this.formData = JSON.parse(query.params)
			// 调用getDetail
			this.getDetail()
			this.getComments()
		},

		methods: {
			// 获取详情信息
			getDetail() {
				this.$api.get_content({
					article_id: this.formData._id
				}).then((res) => {
					const {
						data
					} = res
					this.formData = data
					console.log(res);
				})
			},
			reply(e) {
				this.replyFormData = {
					"comment_id": e.comment_id
				}
				//打开输入框
				this.openComment()
			},


			// 调用评论方法 content接收到的是一个对象
			setRenewComment(content) {
				const formdata = {
					article_id: this.formData._id,
					...content
				}
				this.$api.renew_comment(formdata).then((res) => {
					console.log(res)
					uni.showToast({
						title: "评论成功",
						icon: 'none'
					})
					this.close()
				})
			},
			// 点击打开评论窗口
			openComment() {
				this.$refs.popup.open()
			},
			// 取消关闭评论窗口
			cancel() {
				this.$refs.popup.close()
			},
			//发布评论
			send() {
				console.log("已发送");
				// 判空
				if (this.wordsCount == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入内容'
					})
					return
				}
				this.setRenewComment({
					content: this.commentsValue,
					...this.replyFormData
				})
				this.$refs.popup.close()
			},
			// 请求数据
			getComments() {
				this.$api.get_comment({
					article_id: this.formData._id
				}).then(res => {
					const {
						data
					} = res
					this.commentsList = data
				})
			},
		

		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 15px 0;
		padding-bottom: 54px;
	}

	.detailTitle {
		padding: 0 15px;
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.detailAuthor {
		display: flex;
		align-items: center;
		margin-top: 10px;
		padding: 0 15px;

		.detailAuthorLogo {
			flex-shrink: 0;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.detailAuthorMess {
			width: 100%;
			padding-left: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 12px;

			.detailAuthorName {
				font-size: 16px;
				color: #333;
			}

			.detailAuthorInfo {
				color: #999;

				text {
					margin-right: 10px;

				}
			}
		}
	}

	.passageCont {
		margin-top: 20px;
		min-height: 800px;

		// border: 1px red solid;
		// background:skyblue;
		.passageContHtml {
			padding: 0 15px;
		}

		.commentCont {
			padding-top: 30px;

			.comment-title {
				padding: 10px 15px;
				font-size: 16px;
				color: #666;
				border-bottom: 1px #f5f5f5 solid;
			}

			.comment-content {
				padding: 0 5px;
				border-top: 1px #eee solid;
			}
		}

	}

	.bottomTool {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-item: center;
		width: 100%;
		height: 44px;
		// background-color:#fff;
		box-sizing: border-box;

		.bottomToolLeft {
			display: flex;
			// 左右对齐
			justify-content: center;
			align-items: center;
			margin-left: 10px;
			padding: 0 2px;
			margin-right: 10px;
			width: 60%;
			height: 35px;
			border-radius: 15px;
			// background-color:#f5f5f5;
			background-color: #fff;
			box-shadow: 3px 3px 10px rgb(212, 212, 212);

			text {
				font-size: 16px;
				color: #999;
				margin-left: 10px;
			}

			.bottomToolLeftIcon {
				margin-left: 4px;
				// border:2px solid red;

			}
		}

		.bottomToolRight {
			display: flex;
			flex-shrink: 0;
			// padding:0 2px;
			width: 30%;
			height: 35px;
			align-items: center;
			border-radius: 15px;
			// background-color:#f5f5f5;
			box-shadow: 3px 3px 10px rgb(212, 212, 212);
			background-color: #fff;

			.bottomToolRightIcon {
				position: relative;
				display: flex;
				align-item: center;
				justify-content: center;
				width: 45px;

			}
		}
	}

	.popupwrap {
		background: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;

		.popuphead {
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			color: #666;
			border-bottom: 1px #f5f5f5 solid;

			.popupheadItem {
				height: 60px;
				line-height: 60px;
				padding: 0 15px;
			}

			.popupheadItemTitle {
				height: 60px;
				line-height: 60px;
				padding: 0 15px;
				font-size: 18px;
				color: #333;
				font-weight: 550;
			}
		}

		.popupcontent {
			width: 100%;
			padding: 15px;
			box-sizing: border-box;

			.popuptext {
				width: 100%;
				height: 200px;
			}

			.popuptextcount {
				display: flex;
				justify-content: flex-end;
				font-size: 14px;
				color: #999;
			}
		}
	}
</style>
